<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      html {
        min-height: 50rem;
        min-width: 35rem;
        background: white;
      }

      .navbar-nav .nav-link {
        padding: 0.1rem 0.1rem;
        line-height: 0.8rem;
        font-size: 0.9rem;
        margin: 0%;
        border: 0%;
      }
      textarea:focus {
        box-shadow: none !important;
      }
      /* 按钮去掉点击时候出现的边框 */
      .btn:focus {
        box-shadow: none !important;
      }
    </style>
    <link rel="stylesheet" href="static/css/bootstrap.css" />

    <script src="static/js/jquery-3.5.1.js"></script>
    <!-- <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> -->
    <script src="static/js/bootstrap/bootstrap.js"></script>
  </head>
  <body>
    <nav class="navbar navbar-expand navbar-dark bg-dark fixed-top">
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item active">
            <a class="nav-link" href="/index.html" draggable="false">常用</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/decode.html" draggable="false">编码</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/convert.html" draggable="false">转换</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/crypto.html" draggable="false">加密</a>
          </li>
          <!-- <li class="nav-item">
            <a class="nav-link" href="/setting.html" draggable="false">设置</a>
          </li> -->
        </ul>
      </div>
    </nav>

    <div class="container-fluid">
      <div class="row">
        <div class="col-12" style="margin-top: 2.6rem"></div>
      </div>
      <div class="row">
        <div class="col-10" style="margin-bottom: 0.5rem; padding-right: 0">
          <!-- 输入框 -->
          <textarea id="input_text" class="form-control" rows="4" placeholder="请输入编码"></textarea>
        </div>
        <div class="col-2" style="margin-bottom: 0.2rem; padding: 0.2rem">
          <div class="container">
            <div class="row">
              <button
                type="button"
                id="onButtonEncode"
                class="btn btn-sm btn-block btn-success"
                
              >
                编码
              </button>
            </div>
            <div class="row" style="height: 0.3rem"></div>
            <div class="row">
              <button
                type="button"
                id="onButtonDecode"
                class="btn btn-sm btn-block btn-primary"
              >
                解码
              </button>
            </div>
            <div class="row" style="height: 0.3rem"></div>
            <div class="row">
              <button
                type="button"
                id="onEmpty"
                class="btn btn-sm btn-block btn-info"
              >
                清空
              </button>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-12" style="margin-bottom: 0.2rem">
          <div
            class="card"
            id="input_status"
            style="
              background-color: #dff0d8;
              color: #3c763d;
              padding-left: 1rem;
              padding-bottom: 0.5rem;
              padding-top: 0.5rem;
              font-size: 0.7rem;
            "
          >
            请在上方第一个文本框中输入要编码/解码的字符。
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-12" style="margin-bottom: 0.2rem">
          <span class="badge badge-secondary">Base64：</span>
          <textarea
            id="base64_output"
            class="form-control"
            rows="2"
            onclick="copyText"
            disabled
          ></textarea>
        </div>
        <!-- <div class="col-2" style="margin-bottom: 0.2rem">
          <button class="btn" onclick="copyText()">复制</button>
        </div> -->
      </div>
      <div class="row">
        <div class="col-12" style="margin-bottom: 0.2rem">
          <span class="badge badge-secondary">Base32：</span>
          <textarea
            id="base32_output"
            class="form-control"
            rows="2"
            disabled
          ></textarea>
        </div>
      </div>
      <div class="row">
        <div class="col-12" style="margin-bottom: 0.2rem">
          <!-- <br /> -->
          <span class="badge badge-secondary">URL：</span>
          <!-- <label for="name"></label> -->
          <textarea
            id="url_output"
            class="form-control"
            rows="2"
            disabled
          ></textarea>
        </div>
      </div>
      <div class="row">
        <div class="col-12" style="margin-bottom: 0.2rem">
          <!-- <br /> -->
          <span class="badge badge-secondary">ASCII（Hex）：</span>
          <!-- <label for="name">16进制/字符：</label> -->
          <textarea
            id="char_and_16_output"
            class="form-control"
            rows="2"
            disabled
          ></textarea>
        </div>
      </div>
      <div class="row">
        <div class="col-12" style="margin-bottom: 0.2rem">
          <!-- <br /> -->
          <span class="badge badge-secondary">Unicode：</span>
          <!-- <label for="name">Unicode编码/解码：</label> -->
          <textarea
            id="unicode_output"
            class="form-control"
            rows="2"
            disabled
          ></textarea>
        </div>
      </div>
      <div class="row">
        <div class="col-12" style="margin-bottom: 0.2rem">
          <!-- <br /> -->
          <span class="badge badge-secondary">UTF-8：</span>
          <!-- <label for="name">UTF-8编码/解码：</label> -->
          <textarea
            id="utf-8_output"
            class="form-control"
            rows="2"
            disabled
          ></textarea>
        </div>
      </div>
      <div class="row">
        <div class="col-12" style="height: 0.2rem">

          <hr />
        </div>
      </div>
    </div>
  </body>
  <script src="static/js/DecodeJS/base32.js"></script>
  <script src="static/js/DecodeJS/base64.js"></script>
  <script src="static/js/DecodeJS/md5.js"></script>
  <script src="static/js/DecodeJS/hex2string.js"></script>
  <script src="static/js/DecodeJS/unicode.js"></script>
  <script src="static/js/lib/popum.js"></script>
  <script src="static/js/lib/index.js"></script>
</html>
